<template>
    <div class="music-play">
        <audio  ref="audio" @play="handlePlay" @pause="handlePause" controls
               :src="bitrate.show_link"></audio>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "MusicPlay",
        computed: {
            ...mapState({
                bitrate: "bitrate",
                songinfo: "songinfo",
                processTime: "processTime"
            }),
        },
        mounted() {
            this.$refs.audio.addEventListener('timeupdate', () => {
                console.log(this.$refs.audio.currentTime);
                // 拿到组件的实例
                // 修改vuex的数据
                this.$store.commit('changeCurrentTime', {currentTime: this.$refs.audio.currentTime})
            })
        },
        methods: {
            handlePlay() {
                const imgStyle = {
                    'animation-play-state': 'running'
                }
                this.$store.commit('changeImgStyle',{imgStyle})
            },
            handlePause() {
                const imgStyle  = {
                    'animation-play-state': 'paused'
                }
                this.$store.commit('changeImgStyle',{imgStyle})
            },
        },
        watch: {
            processTime() {
                this.$refs.audio.currentTime = this.processTime;
            }
        },
    }
</script>

<style scoped lang="less">
    .music-play {
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: lightblue;
        width: 100%;
        display: flex;
        justify-content: center;
    }
</style>
